<template>
	<view class="content content-relative" @touchstart="touchStart" @touchend="touchEnd">
		<view class="header-mask-blue"></view>
		<view class="project-list">
			<view @click="baseInfo(0)">
				<view class="project-list-title">
					<text>{{ project.hard_name }}</text>
					<text>{{ projectState[project.state] }}</text>
				</view>
				<view class="project-list-time">
					<text>{{ project.start_date }}</text>
					<text>{{ project.end_date }}</text>
				</view>
			</view>

			<view class="project-list-progress"><progress :percent="project.project_progress" stroke-width="10" active activeColor="#f6c237" background-color="#fcf0d1" /></view>
			<view class="dash-line"></view>
			<view class="project-manager-info" @click="goPersonalManager">
				<text class="project-manager-mark">{{ project.manager !== null ? project.manager : '姓' }}</text>
				<view class="project-manager-name">
					<text>{{ project.manager }}</text>
					<text>项目经理</text>
				</view>
				<text class="project-manager-customer">{{ project.customer }}</text>
			</view>
		</view>
		<view class="project-manage">
			<text class="project-title">项目管理</text>
			<view class="def-grid def-padding">
				<!-- <view class="def-grip-item" @click="baseInfo(0)">
					<view class="home-top-sty icon-colour-fabf">
						<text class="def-icon def-icon-project-info">&#xe68e;</text>
					</view>
					<text class="uni-grid-9-text private-text">基础信息</text>
				</view> -->
				<view class="def-grip-item" @click="baseInfo(1)">
					<view class="home-top-sty icon-colour-blue"><text class="def-icon def-icon-task">&#xe607;</text></view>
					<text class="uni-grid-9-text private-text">任务列表</text>
				</view>
				<view class="def-grip-item" @click="goConstruction">
					<view class="home-top-sty icon-colour-green"><text class="def-icon def-icon-material">&#xe61b;</text></view>
					<text class="uni-grid-9-text private-text">施工日志</text>
				</view>
				<view class="def-grip-item" @click="goComments">
					<view class="home-top-sty icon-colour-blue"><text class="def-icon def-icon-project-comment">&#xe62e;</text></view>
					<text class="uni-grid-9-text private-text">项目动态</text>
				</view>
				<view class="def-grip-item" @click="goPersonalManager">
					<!-- <text class="def-icon def-icon-human">&#xe6c6;</text> -->
					<view class="home-top-sty icon-colour-violet"><text class="def-icon def-icon-tel">&#xe60c;</text></view>
					<text class="uni-grid-9-text private-text">项目成员</text>
				</view>
				<view class="def-grip-item" @click="goMaterialList">
					<view class="home-top-sty icon-colour-red"><text class="def-icon def-icon-material">&#xe676;</text></view>
					<text class="uni-grid-9-text private-text">材料列表</text>
				</view>
				<navigator :url="'/pagesProjectDetail/myProject/measure/measureTypeList?id=' + id">
					<view class="def-grip-item">
						<view class="home-top-sty icon-colour-fabf"><text class="def-icon def-icon-material">&#xe634;</text></view>
						<text class="uni-grid-9-text private-text">复尺下单</text>
					</view>
				</navigator>
				<view class="def-grip-item" @click="goIncreaseItemList">
					<view class="home-top-sty icon-colour-violet"><text class="def-icon def-icon-project-check">&#xe742;</text></view>
					<text class="uni-grid-9-text private-text">增项列表</text>
				</view>
				<view class="def-grip-item" @click="baseInfo(3)">
					<view class="home-top-sty icon-colour-red"><text class="def-icon def-icon-project-check">&#xe64d;</text></view>
					<text class="uni-grid-9-text private-text">项目验收</text>
				</view>
				<view class="def-grip-item" @click="baseInfo(4)">
					<view class="home-top-sty icon-colour-fabf"><text class="def-icon def-icon-project-info">&#xe605;</text></view>
					<text class="uni-grid-9-text private-text">项目结算</text>
				</view>
				<view class="def-grip-item" @click="baseInfo(5)">
					<view class="home-top-sty icon-colour-violet"><text class="def-icon def-icon-maps">&#xe868;</text></view>
					<text class="uni-grid-9-text private-text">项目地图</text>
				</view>
				<navigator :url="'../../pagesProjectDetail/myProject/projectDetail/effectPicture?id=' + id">
					<view class="def-grip-item">
						<view class="home-top-sty icon-colour-blue"><text class="def-icon def-icon-log">&#xe6df;</text></view>
						<text class="uni-grid-9-text private-text">效果图</text>
					</view>
				</navigator>
				<view class="def-grip-item" @click="baseInfo(6)">
					<view class="home-top-sty icon-colour-red"><text class="def-icon def-icon-log">&#xe60d;</text></view>
					<text class="uni-grid-9-text private-text">图文日志</text>
				</view>
				<view class="def-grip-item" @click="baseInfo(2)">
					<view class="home-top-sty icon-colour-green"><text class="def-icon def-icon-project-rule">&#xe617;</text></view>
					<text class="uni-grid-9-text private-text">施工规范</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { projectState } from '@/common/stateData.js';
export default {
	data() {
		return {
			project: {},
			startPageX: 0,
			startPageY: 0,
			id: 1,
			projectState: projectState
		};
	},
	onLoad(param) {
		this.getProject(param.id);
		this.id = param.id;
	},
	methods: {
		//人工管理
		goPersonalManager() {
			uni.navigateTo({
				url: './projectDetail/personalManager?id=' + this.id,
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		},
		//施工日志
		goConstruction() {
			uni.navigateTo({
				url: './projectDetail/constructionLog?id=' + this.id,
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		},
		goComments() {
			uni.navigateTo({
				url: '../../pagesProjectDetail/myProject/projectDetail/projectComment?id=' + this.id,
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		},
		goMaterialList() {
			uni.navigateTo({
				url: '../../pagesProjectDetail/myProject/projectDetail/materialList?id=' + this.id,
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		},
		goIncreaseItemList() {
			uni.navigateTo({
				url: '../../pagesProjectDetail/myProject/projectDetail/increaseItemList?id=' + this.id,
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		},
		baseInfo(index) {
			uni.navigateTo({
				url: '../../pagesProjectDetail/myProject/tabbar?index=' + index + '&id=' + this.id,
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		},
		getProject(id) {
			this.$request({
				url: this.$store.state.baseUrl + '/lwj/get_app_hard_info',
				method: 'POST',
				header: {
					token: this.$store.state.token
				},
				data: {
					hard_id: id
				},
				success: res => {
					this.project = res.data.data.info;
				},
				fail: () => {},
				complete: () => {}
			});
		},
		touchStart(event) {
			this.startPageX = event.pageX;
			this.startPageY = event.pageY;
		},
		touchEnd(event) {
			if (event.mp.changedTouches[0].pageX - this.startPageX > 60 && this.startPageY - event.mp.changedTouches[0].pageY < 10) {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
};
</script>

<style>
/* 项目管理样式 开始 */
.uni-grid-9-text {
	width: 186upx;
}

.def-icon-project-rule,
.def-icon-log {
	color: #ffffff;
}

.def-icon-project-info,
.def-icon-maps {
	color: #ffffff;
}

.def-icon-project-check,
.def-icon-task {
	color: #ffffff;
}

.def-icon-project-comment,
.def-icon-human {
	color: #ffffff;
}

.def-icon-material,
.def-icon-tel {
	color: #ffffff;
}

.project-title {
	padding-left: 75upx;
	display: block;
	border-bottom: 1px dashed #efeff4;
	height: 80upx;
	line-height: 80upx;
	font-weight: bold;
}

.project-manage {
	border-radius: 16upx;
	background-color: white;
	margin: 20upx 0;
}

.def-grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.def-grip-item,
.def-grip-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 180upx;
}

.def-grid .def-grip-more {
	width: 180upx;
}

/* 项目管理样式结束 */

/* 项目样式开始 */
.project-list {
	background-color: #ffffff;
	border-radius: 20upx;
	padding: 40upx 15upx 20upx;
	margin: 0;
}

.dash-line {
	margin: 40upx 0 20upx;
	border-top: 2upx dashed #eeeeee;
}

.project-manager-mark {
	display: inline-block;
	width: 70upx;
	height: 70upx;
	line-height: 70upx;
	background-color: #008ff3;
	border-radius: 50%;
	text-align: center;
	font-size: 40upx;
	color: #ffffff;
	overflow: hidden;
}

.project-manager-name {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding-left: 20upx;
}

.project-manager-name text:nth-child(1) {
	font-size: 30upx;
	font-weight: bold;
}

.project-manager-name text:nth-child(2) {
	color: #999999;
	font-size: 24upx;
}

.project-manager-info {
	display: flex;
	align-items: center;
}

.project-manager-customer {
	line-height: 40upx;
	height: 40upx;
	padding: 6upx 20upx;
	background-color: #f4f4f4;
	border-radius: 6upx;
	color: #999999;
}

.project-list-title,
.project-list-time {
	display: flex;
	justify-content: space-between;
}

.project-list-time {
	color: #999999;
}

.project-list-title {
	margin-bottom: 10upx;
}

.project-list-title text:nth-child(1) {
	max-width: 470upx;
	word-wrap: break-word;
	word-break: normal;
	font-size: 40upx;
}

.project-list-title text:nth-child(2) {
	font-size: 30upx;
	color: #fe3b35;
	height: 40upx;
	line-height: 40upx;
	background-color: #feeeee;
	align-self: center;
	padding: 6upx 20upx;
	border-radius: 6upx;
}

.home-top-sty {
	position: relative;
	width: 100upx;
	height: 100upx;
	border-radius: 100%;
	background-color: #eef3f6;
	text-align: center;
	line-height: 100upx;
}
.def-icon {
	font-size: 55upx;
}
.private-text {
	line-height: 80upx;
}
.def-padding {
	padding: 30upx 0;
}
.def-padding .def-grip-item {
	height: 180upx;
	margin-bottom: 20upx;
}
.icon-colour-fabf {
	background-color: #fbaf22;
}
.icon-colour-blue {
	background-color: #5da0fb;
}
.icon-colour-green {
	background-color: #80c269;
}
.icon-colour-violet {
	background-color: #6d56ff;
}
.icon-colour-red {
	background-color: #ff616e;
}
.content-relative {
	position: relative;
}
.header-mask-blue {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 150upx;
	background-color: #008ff3;
}
/* 项目样式结束 */
</style>
